jojo風顔メーカープロフ

スポンサーリンク

WordPress

AdSense(アドセンス)初心者がSTINGER+で小見出し(h2)上に広告を入れたり記事下広告を横並びにしてみたりして、気を付けなきゃいけなさそうな事の忘備録

2016年11月7日

あくまでもエルちゃんがメインのこのサイト。上限が無いからってワサワサ広告だらけにする気はありません。

でも、「記事中に広告をいれた方がデキるサイト」に見えるらしいのでミーハー心でさっそくやってみました。

かと言って前回のやり方では何かあった時の修正が大変です。よって、h2(見出し2)タグの上に1つだけ入れています。

記事下は遊びスペースと思っているので「なんかそれっぽい」感じに今時な横並び広告にしてみました。

現在は別テーマを使用しているので、この仕様ではありません

  • 出たとこ勝負な性格なので子テーマは使いません。グダグダ言いながら「設定」とかのやり直し作業が結構好きなんです。→だから、テーマを変える度にすべて1からやり直しです。その為の忘備録です。
  • 中央寄りが「可愛い」と思っています。

スポンサーリンク

サイトをいじるなら、先にやっておいた方が良いこと

私だけかもしれませんが、書き出しにh2タグを使っている記事が何個もありました。何でなのか意味が分かりませんが、書いてる時はその方が「見栄えが良い」と思っていたんでしょうね。

そのままではスクロールしないと記事が読めません。アドセンスのプログラムポリシーに違反してしまいます。h3タグにでも変えておいて下さい。私は後から気付き、ウンザリしながら記事の書き換えをしました。⇒adSenseプログラムポリシー

バックアップ的な事とかメモ帳機能を使うスキルとかそんなのは「常識」らしいので載せません←私は出来ません。

「スポンサードリンク」なのか「スポンサーリンク」なのか真剣に悩んでいる人、「前はこうだった」と議論している場も多々見かけますが現在の公式サイトでは見出しは「広告」か「スポンサーリンク」を使うようにと書いてあります。

「ド」があろうがなかろうが別にポリシー違反にはならないようですけど。では本題

広告を2つ横並びにしてみよう

中央寄りにして余白モリモリなら2個横並びにしたら良いんじゃね?って事で欲張ってそうしてみました。

記事エリアの横幅を変更する

アドセンスのレクタングル大(336×280)に合わせるため下記のコードを「style.css」に付け加えました。

/*記事エリアの幅変更*/
/*PCのみ*/
@media print, screen and (min-width: 960px) {
main {
  padding: 30px 29px 30px;
}
.st-eyecatch {
  margin: -30px -29px 20px;
}
}

当ブログでは投稿記事の最上部にアイキャッチ画像を使用していないので「.st-eyecacth~}」は本当は必要ありません。

「single.php」の編集

「Ctrlキー」+「F」の検索枠に「広告枠」と入力してマークされる部分、<!--広告枠--><!--/広告枠-->内のコードを<?php /**/ ?>で囲んでコメントアウトさせました。(あとで元に戻さなきゃいけなくなった時用に削除じゃなくてコメントアウト)

その<!--/広告枠-->のすぐ下に以下を加えて

<div align="center">
<font size="2">スポンサーリンク</font>
</div>
<!-- 広告枠 -->
<div class="adbox">
  
  <?php if ( st_is_mobile() ) { //スマホの場合 ?>
  <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
<div class="adsbygoogle" style="padding-top:10px;">
  <?php get_template_part( 'st-smartad' ); //スマホ用広告読み込み ?>
</div>
  <?php } else { //PCの場合 ?>
<div class="ad-box clearfix">
<div id="ad-pc-left">
  <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div>
<div id="ad-pc-right">
  <?php get_template_part( 'ad' ); //アドセンス読み込み ?>
</div>
</div>
  <?php } ?>
</div>
<!-- /広告枠 -->

表示スタイルの指定

「style.css」に戻って下記を追加

/*アドセンス記事下*/
/*PC・タブレット*/
@media print, screen and (min-width: 768px) {
.ad-box {
  margin-bottom: 40px;
}
#ad-pc-left {
  float: left;
}
#ad-pc-right {
  float: right;
}
}

オマケ〜h2(見出し)の上にアドセンス広告を載せてみた〜

広告の下の余白を増やしたり中央寄せだったり私の「したい仕様」の事が全部載っていました。そのまま丸ごと参考にさせて頂きました。

参考サイト⇒kanamii

横並びのやり方も詳しく丁寧に載っていました。最初からこちらを参考にさせて頂けば良かったorz

「女の子」らしくて、すごく可愛いサイトです。

転載&リンクの許可もちゃんと頂きました。

はじめまして。
ブログへのご来訪とお問い合わせをありがとうございます。

タイトルに"転載の許可の申請"とありますが、当ブログの文章をそのままコピーペーストすることはお断りさせていただいておりますが、文章そのもののコピーではなく、カスタマイズの参考サイトとして当ブログのリンクを掲載して下さることに関しましては大変光栄でございます。

その際には、記事内のコードをコピーして下さって構いません。

わざわざご丁寧にご連絡をいただきましてありがとうございます。

どうぞ今後ともよろしくお願いいたします。

Kanami

世の中には親切で優しい方が多くて本当にありがたいです。

Kanamiさん、ありがとうございました。

上記に何度も出てきましたが「スポンサーリンク」「広告」は必須です。

私が勝手に「必須」だと思い込んでいただけで別になくても良いようです。

Googleの公式サイトには

AdSense の広告ユニットには、「広告」と「スポンサーリンク」のいずれかのラベルを表示できます。他の種類のラベルは、現時点では許可されません。

と、ありました。

「付けるならこうしなさい。」というだけで、無ければ無いで良いのです。

ただ、「ミスクリック」などを防ぐためにも、やっぱり広告ラベルはあった方が良いんじゃないかって思います。

だってGoogleは、ミスクリックを誘発するような「紛らわしい」ことや「ずるい」ことを認めないと言ってくれているんです。だから「稼ぐための悪巧み」は考えなくて良いという事ですからね。

安心して正しい気持ちでちゃんと作る「あなたのサイト」をきちんと評価してくれるということですからね。

まあ、そういう事はスキル的に何も「出来ない」というのもありますが、私はそれに従って、広告には広告ときちんと表示して分かりやすい「うちのエルちゃん可愛いでしょ♡フェレット大好き」なブログを続けていこうと思います。

親切な方というのは本当に親切で丁寧なのだと彼女と出会ってとことん分かりました。

kanamiiさんからTwitter返信

わざわざご丁寧にご返信を頂きました。彼女のお人柄がそのまま丸ごと詰め込まれているようなサイトです。本当に丁寧ですごく分かりやすくstinger+のカスタマイズ方法が書かれています。

是非ぜひ参考になさって下さい。私はブックマークして何度も見直しています。

Kanami様、本当にありがとうございました。これからもよろしくお願いいたします。

オマケ2

この際だからプロフィール画像も変えたかったのですが比率的に上手く出来ませんでした。

面白いので興味のある方はどうぞ⇒ジョジョ顔メーカー1.1

-WordPress